<template>
  <div class="dashboard-editor-container">
    <div class="userInfo clearfix">
      <pan-thumb :image="avatar" style="float: left">
        Your roles:
        <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
      </pan-thumb>
      <!--      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />-->
      <div class="info-container">
        <!--        class="display_name"-->
        <span class="display_name">{{ name }}
<!--           v-if="gradeName!=null"-->
          <span  v-if="gradeName!=null">
             <el-tag >{{gradeName}}</el-tag>
              <span style="font-size: 16px;">  ({{grade}})</span>
          </span>
        </span>
        <!--        class="btnGroup"-->
        <span class="btnGroup">
          <el-badge v-if="msgNum!=0" :value="msgNum" class="item">
            <el-button
              class="messageButton"
              icon="el-icon-message"
              ground
              size="medium"
            ><router-link to="/messageList">
            消息面板
          </router-link></el-button>
          </el-badge>
           <el-button
             v-else
             class="messageButton"
             icon="el-icon-message"
             ground
             size="medium"
           ><router-link to="/messageList">
            消息面板
          </router-link></el-button>
        </span>
      </div>

    </div>
    <div>
      <img :src="emptyGif" class="emptyGif">
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import PanThumb from '@/components/PanThumb'
  import GithubCorner from '@/components/GithubCorner'
  import {getUserUnReadInfoNum} from '@/api/identity'
  import {getInfo} from "@/api/user"

  export default {
    name: 'DashboardEditor',
    components: {PanThumb, GithubCorner},
    data() {
      return {
        emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3',
        msgNum: null,
        gradeName: null,
        grade: null,
      }
    },
    computed: {
      ...mapGetters([
        'token',
        'name',
        'avatar',
        'roles'
      ])
    },
    created() {
      this.getMessageNum()
      this.getGradeInfo();
    },
    mounted() {
      // this.getMessageNum()
    },
    methods: {
      getMessageNum() {
        getUserUnReadInfoNum().then(res => {
          if (res.code === 20000) {
            this.msgNum = res.data
          }
        })
      },
      /*获取基本用户信息*/
      getGradeInfo() {
        const _this = this;
        getInfo(this.token).then(response => {
          console.log(response)
          if (response.code === 20000){
            _this.gradeName = response.data.gradeName
            _this.grade = response.data.grade
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .userInfo {
    padding-bottom: 20px;
    border-bottom: 1px solid #8c939d;
  }

  .emptyGif {
    display: block;
    width: 45%;
    margin: 0 auto;
  }

  .dashboard-editor-container {
    background-color: #e3e3e3;
    min-height: 100vh;
    padding: 50px 60px 0px;

    .pan-info-roles {
      font-size: 12px;
      font-weight: 700;
      color: #333;
      display: block;
    }

    .info-container {
      position: relative;
      margin-left: 190px;
      height: 150px;
      /*line-height: 200px;*/
      .display_name {
        font-size: 48px;
        line-height: 48px;
        color: #212121;
        position: absolute;
        top: 25px;
      }

      .btnGroup {
        position: absolute;
        display: block;
        top: 100px;
      }
    }
  }
</style>
